import { useModel } from "umi";
import { useReactive } from "ahooks";
import { useEffect } from "react";
import { Table, Space } from "antd";
import { Card as SemiCard } from "@douyinfe/semi-ui";

const { Column } = Table;

const ReportByRole = () => {
    const { graphqlFetchPlatform, windowInnerHeight } = useModel("global");

    const state = useReactive({
        loading: false,
        data: [],
        groupFree: {},
        sums: {},
    });

    const loadData = async () => {
        state.loading = true;
        let query = `query MyQuery {
            a: allApplications {
              b: groupedAggregates(groupBy: AI_ROLE) {
                keys
                sum {
                  aiEcpr
                  aiSdpr
                  aiSppr
                }
                distinctCount {
                  aiUuid
                }
              }
              c: groupedAggregates(groupBy: [AI_ROLE, IS_FREE]) {
                keys
                distinctCount {
                  aiUuid
                }
              }
              aggregates {
                sum {
                  aiSppr
                  aiSdpr
                  aiEcpr
                }
              }
            }
          }`;
        let res = await graphqlFetchPlatform({ query, variables: {} });
        state.data = res?.a?.b.map((item) => ({ roleName: item.keys[0], appCount: item.distinctCount.aiUuid, ...item.sum })) || [];
        let groupFree = {};
        res?.a?.c?.forEach((item) => {
            const [role, isFree] = item.keys;
            isFree === "true" ? (groupFree[role + "-free"] = item.distinctCount.aiUuid) : (groupFree[role + "-nofree"] = item.distinctCount.aiUuid);
        });
        state.groupFree = groupFree;
        state.sums = res?.a?.aggregates?.sum || {};
        state.loading = false;
    };

    useEffect(() => {
        loadData();
    }, []);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 15 }}>所属角色计费报表</span>}
            headerStyle={{ padding: "10px 14px" }}
            headerExtraContent={
                <Space size={30} style={{ lineHeight: "32px", fontSize: 14, fontWeight: 500 }}>
                    <div>开发商价合计：{"￥" + helper.numberFormat(state.sums.aiSdpr, 2)}</div>
                    <div>服务商价合计：{"￥" + helper.numberFormat(state.sums.aiSppr, 2)}</div>
                    <div>客户价合计：{"￥" + helper.numberFormat(state.sums.aiEcpr, 2)}</div>
                </Space>
            }
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
            style={{ margin: 10 }}
        >
            <Table loading={state.loading} size="small" dataSource={state.data} rowKey="roleName" bordered pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
                <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Column title="角色名称" dataIndex="roleName" align="left" />
                <Column title="应用数量" dataIndex="appCount" align="center" width={160} render={(_) => helper.numberFormat(_, 0)} />
                <Column title="免费应用数" dataIndex="appCount" align="center" width={160} render={(_, r, i) => helper.numberFormat(state.groupFree[r.roleName + "-free"], 0)} />
                <Column title="收费应用数" dataIndex="appCount" align="center" width={160} render={(_, r, i) => helper.numberFormat(state.groupFree[r.roleName + "-nofree"], 0)} />
                <Column title="开发商价" dataIndex="aiSdpr" align="right" width={160} render={(_) => (parseInt(_) !== 0 ? "￥" + helper.numberFormat(_, 2) : "-")} />
                <Column title="服务商价" dataIndex="aiSppr" align="right" width={160} render={(_) => (parseInt(_) !== 0 ? "￥" + helper.numberFormat(_, 2) : "-")} />
                <Column title="客户价" dataIndex="aiEcpr" align="right" width={160} render={(_) => (parseInt(_) !== 0 ? "￥" + helper.numberFormat(_, 2) : "-")} />
            </Table>
        </SemiCard>
    );
};

export default ReportByRole;
